<template>
  <div class="begin-container">
    <h1>首页</h1>
    <h2>当前正在运输的货物</h2>
    <table>
      <thead>
        <tr>
          <th>订单号</th>
          <th>目的地</th>
          <th>当前定位</th>
          <th>预计抵达时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="order in displayedOrders" :key="order.id">
          <td>{{ order.id }}</td>
          <td>{{ order.destination }}</td>
          <td>{{ order.currentLocation }}</td>
          <td>{{ order.estimatedArrival }}</td>
        </tr>
      </tbody>
    </table>
    <div class="charts">
      <div class="sales-chart" ref="salesChart" style="width: 400px; height: 300px;"></div>
      <div class="trend-chart" ref="trendChart" style="width: 400px; height: 300px;"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'BeginPage',
  data() {
    return {
      orders: this.generateOrders(),
      currentOrderIndex: 0,
      salesData: this.generateSalesData(),
      currentSalesIndex: 0
    };
  },
  mounted() {
    this.initSalesChart();
    this.initTrendChart();
    setInterval(this.updateOrderDisplay, 3000); // 每3秒更新订单显示
    setInterval(this.updateSalesDisplay, 5000); // 每5秒更新销售数据
  },
  computed: {
    displayedOrders() {
      return this.orders.slice(this.currentOrderIndex, this.currentOrderIndex + 5);
    },
    totalSales() {
      return this.salesData.reduce((acc, val) => acc + val, 0);
    }
  },
  methods: {
    generateOrders() {
      const destinations = ['北京', '上海', '广州', '深圳', '杭州', '南京', '成都', '重庆', '武汉', '西安'];
      const locations = ['郑州', '武汉', '长沙', '合肥', '济南', '太原', '南昌', '贵阳', '昆明', '兰州'];
      return Array.from({ length: 10 }, (_, i) => ({
        id: i + 1,
        destination: destinations[i % destinations.length],
        currentLocation: locations[i % locations.length],
        estimatedArrival: `2025-04-${Math.floor(Math.random() * 30) + 1}`
      }));
    },
    updateOrderDisplay() {
      this.currentOrderIndex = (this.currentOrderIndex + 1) % (this.orders.length - 2);
    },
    generateSalesData() {
      return Array.from({ length: 31 }, () => Math.floor(Math.random() * 5000) + 1000);
    },
    updateSalesDisplay() {
      this.currentSalesIndex = (this.currentSalesIndex + 1) % (this.salesData.length - 7);
      this.initSalesChart();
    },
    initSalesChart() {
      const salesChart = echarts.init(this.$refs.salesChart);
      const option = {
        title: {
          text: '本月单日销售额'
        },
        tooltip: {},
        xAxis: {
          data: Array.from({ length: 7 }, (_, i) => `4.${this.currentSalesIndex + i + 1}`)
        },
        yAxis: {},
        series: [{
          name: '销售额（元）',
          type: 'bar',
          data: this.salesData.slice(this.currentSalesIndex, this.currentSalesIndex + 7)
        }]
      };
      salesChart.setOption(option);
    },
    initTrendChart() {
      const trendChart = echarts.init(this.$refs.trendChart);
      const totalSales = this.totalSales;
      const option = {
        title: {
          text: `本月累计营销额：${totalSales} 元`,
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '销售数据',
            type: 'pie',
            radius: ['40%', '70%'], // 设置为环形图
            data: [
              { value: Math.floor(totalSales * 0.2), name: '产品1' },
              { value: Math.floor(totalSales * 0.2), name: '产品2' },
              { value: Math.floor(totalSales * 0.2), name: '产品3' },
              { value: Math.floor(totalSales * 0.2), name: '产品4' },
              { value: Math.floor(totalSales * 0.2), name: '产品5' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      trendChart.setOption(option);
    }
  }
}
</script>

<style scoped>
.begin-container {
  padding: 20px;
  text-align: center; /* 居中显示 */
  width: 100%;
  margin: 0 auto; /* 居中 */
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

.charts {
  display: flex;
  justify-content: space-around;
  margin-top: 5%;
}

.sales-chart, .trend-chart {
  width: 50%;
}
</style>